<template>
  <div class="authorize">
    <el-tabs v-model="activeTab" class="JNPF-el_tabs">
      <el-tab-pane label="菜单权限" name="module"></el-tab-pane>
      <el-tab-pane label="按钮权限" name="button"></el-tab-pane>
      <el-tab-pane label="列表权限" name="column"></el-tab-pane>
      <el-tab-pane label="表单权限" name="form"></el-tab-pane>
      <el-tab-pane label="数据权限" name="resource"></el-tab-pane>
      <el-tab-pane label="门户权限" name="portal"></el-tab-pane>
      <el-tree v-show="treeData.length" :data="treeData" :props="defaultProps" default-expand-all highlight-current
        ref="treeBox" :expand-on-click-node="false" class="JNPF-common-el-tree" node-key="id" v-loading="loading">
        <span class="custom-tree-node" slot-scope="{ node, data }">
          <i :class="data.icon"></i>
          <span class="text">{{node.label}}</span>
        </span>
      </el-tree>
      <div v-show="!treeData.length" v-loading="loading">
        <el-empty description="暂无数据"></el-empty>
      </div>
    </el-tabs>
  </div>
</template>

<script>

  import { AuthorizeList } from '@/api/permission/userSetting'
  export default {
    data() {
      return {
        treeData: [],
        info: [],
        activeTab: 'module',
        defaultProps: {
          children: 'children',
          label: 'fullName'
        },
        loading: false
      }
    },
    watch: {
      activeTab(val) {
        this.treeData = this.info[val]
      }
    },
    created() {
      // this.getList()
    },
    methods: {
      getList() {
        this.loading = true
        AuthorizeList().then(res => {
          this.info = res.data;
          this.treeData = this.info[this.activeTab]
          this.loading = false
        })
      },
    }
  }
</script>
<style lang="scss" scoped>
  .authorize {
    height: 100%;
    overflow: hidden;

    >>>.el-tabs__nav-scroll {
      padding-top: 0 !important;
    }

    >>>.el-tabs__content {
      overflow: auto;
      overflow-x: hidden;

      .el-tab-pane {
        height: auto !important;
      }

      .JNPF-common-el-tree {
        padding: 0;
      }
    }
  }
</style>